/** 
 * 学习目标：常见的受控组件
 * + 文本框、文本域、下拉框（操作value属性）
+ 复选框（操作checked属性）
 * 总结：

    // anfn 快速生成箭头函数
    checked的赋值特殊一些，得绑定checked，赋值要e.target.checked
 * */
import React from "react";

export default class App extends React.Component {
    state = {
        usernmae: '',
        desc: '',
        city: "2",
        isSingle: true
    };

    render() {
        return (
            <div>
                <input type="text" value={this.state.usernmae} onChange={this.handleName} />
                <br />
                描述：<textarea value={this.state.desc} onChange={this.handleDesc}></textarea>
                <br />
                城市：
                <select value={this.state.city} onChange={this.handleCity}>
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">广州</option>
                    <option value="4">深圳</option>
                </select>
                <br />

                是否单身：<input type="checkbox" checked={this.state.isSingle} onChange={this.handleSingle} />
            </div>
        );
    }
    // anfn 快速生成箭头函数
    handleName = e => {
        this.setState({
            usernmae: e.target.value
        })
    }
    handleDesc = e => {
        this.setState({
            desc: e.target.value
        })
    }
    handleCity = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    handleSingle = (e) => {
        this.setState({
            isSingle: e.target.checked
        })
    }
}